<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="8" :offset="5">
        <el-card class="box-card">
          <div slot="header">
            <span class="my-font">心理咨询师</span>
            <el-input
              class="search-input"
              placeholder="输入咨询师名字"
            ></el-input>
            <el-button type="primary" class="search-button" size="small"
              >搜索 <i class="el-icon-search"></i
            ></el-button>
          </div>
          <!-- 遍历所有咨询师 -->
          <el-empty description="暂无心理咨询师" v-if="totalConsult == 0">
          </el-empty>
          <div v-if="totalConsult != 0">
            <div v-for="o in pageSize" :key="o">
              <div class="card-button">
                <ConsultCard></ConsultCard>
                <div class="consult-button">
                  <el-button type="primary" size="medium" plain round
                    >咨询+{{ o + (currentPage - 1) * pageSize }}</el-button
                  >
                </div>
              </div>
            </div>
          </div>

          <!-- 分页 -->
          <el-pagination
            class="consult-pagination"
            @current-change="handleCurrentChange"
            layout="total, prev, pager, next, jumper"
            :current-page="currentPage"
            :page-size="pageSize"
            :total="totalConsult"
          >
          </el-pagination>
        </el-card>
      </el-col>

      <el-col :span="6">
        <el-card class="box-card">
          <div slot="header" style="height: 30px">
            <span class="my-font">最新入驻咨询师</span>
          </div>
          <!-- 遍历最新咨询师 -->
          <div v-for="o in 5" :key="o">
            <ConsultCard></ConsultCard>
          </div>

          <!-- 换一换 -->
          <el-button class="change-button" icon="el-icon-refresh-right" round
            >换一换</el-button
          >
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import ConsultCard from "./ConsultCard.vue";
export default {
  components: { ConsultCard },
  data() {
    return {
      totalConsult: 3, //总数
      pageSize: 5, //一页条数
      currentPage:2, //当前页
    };
  },
  methods:{
    handleCurrentChange(currentPage){
     this.currentPage = currentPage
    }
  }
};
</script>

<style scoped>
.my-font {
  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
  font-weight: bold;
}

.search-input {
  width: 180px;
  padding-left: 210px;
}

.search-button {
  margin-left: 10px;
}

.card-button {
  display: flex;
  align-items: center;
}

.consult-button {
  padding-left: 30px;
  padding-top: 25px;
}

.change-button {
  margin-left: 170px;
  margin-top: 10px;
}

.consult-pagination {
  padding-top: 10px;
  padding-left: 10px;
}
</style>